@import "common.less";

@baseFont: 50;

body {
    min-width: 320rem / @baseFont;
    max-width: 750rem / @baseFont;
    width: 15rem;
    margin: auto;
    line-height: 1.5;
    font-family:  Arial,Helvetica;
    background-color: #f2f2f2;
}
header {
    position: relative;
    width: 750rem / @baseFont;
    .nav-index-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 750rem / @baseFont;
        height: 180rem / @baseFont;
        img {
            width: 750rem / @baseFont;
        height: 180rem / @baseFont;
        }
    }
    .nav-index-wraper {
        position: relative;
        width: 750rem / @baseFont;
        .nav-index-wraper-one {
            display: flex;
            width: 682rem / @baseFont;
            height: 88rem / @baseFont;
            margin: 0 auto;
            justify-content: space-between;
            .classify {
                display: block;
                width: 36rem / @baseFont;
                height: 60rem / @baseFont;
                margin-top: 17rem / @baseFont;
                img {
                    width: 36rem / @baseFont;
                    height: 60rem / @baseFont;
                }
            }
            .header-link {
                img {
                    width: 450rem / @baseFont;
                    height: 55rem / @baseFont;
                    margin: 18rem / @baseFont 50rem / @baseFont 0 0;
                }
            }
            .login {
                width: 36rem / @baseFont;
                height: 60rem / @baseFont;
                margin: 17rem / @baseFont 0;
                text-align: center;
                img {
                    width: 36rem / @baseFont;
                    height: 60rem / @baseFont;
                }
            }
        }
        .nav-index-wraper-two {
            width: 750rem / @baseFont;
            height: 92rem / @baseFont;
            padding: 0 24rem / @baseFont;
            box-sizing: border-box;
            .search-box {
                position: relative;
                a.search {
                    position: absolute;
                    width: 100%;
                    height: 88rem / @baseFont;
                    .search-icon {
                        position: absolute;
                        top: 50%;
                        left: 20rem / @baseFont;
                        width: 36rem / @baseFont;
                        height: 36rem / @baseFont;
                        transform: translateY(-50%);
                        background: url(../images/magnifier.png) no-repeat;
                        background-size: 36rem / @baseFont auto;
                    }
                }
                form {
                    height: 88rem / @baseFont;
                    .searchInput {
                        width: 100%;
                        height: 64rem / @baseFont;
                        line-height: 64rem / @baseFont;
                        padding: 3rem / @baseFont 20rem / @baseFont 0 65rem / @baseFont;
                        border-radius: 30rem / @baseFont;
                        font-size: 28rem / @baseFont;
                        color: #999;
                        background-color: #fff;
                        -webkit-box-sizing: border-box;
                        box-sizing: border-box;
                    }
                }
            }
        }
    }
    .nav-fixed-wraper {
        display: none;
        position: relative;
        width: 15rem;
        background-color: #fe8c43;
        .nav-fixed-search-box {
            width: 13.64rem;
    height: 1.76rem;
    margin: 0 auto;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    .classify {
        display: block;
        width: 36rem / @baseFont;
        height: 60rem / @baseFont;
        margin-top: 17rem / @baseFont;
        img {
            width: 36rem / @baseFont;
            height: 60rem / @baseFont;
        }
    }

    .search-box {
        width: 10.44rem;
        position: relative;
            a.search {
                position: absolute;
                width: 100%;
                height: 88rem / @baseFont;
                .search-icon {
                    position: absolute;
                    top: 50%;
                    left: 20rem / @baseFont;
                    width: 36rem / @baseFont;
                    height: 36rem / @baseFont;
                    transform: translateY(-50%);
                    background: url(../images/magnifier.png) no-repeat;
                    background-size: 36rem / @baseFont auto;
                }
            }
            form {
                height: 88rem / @baseFont;
                .searchInput {
                    width: 100%;
                    height: 64rem / @baseFont;
                    line-height: 64rem / @baseFont;
                    padding: 3rem / @baseFont 20rem / @baseFont 0 65rem / @baseFont;
                    border-radius: 30rem / @baseFont;
                    font-size: 28rem / @baseFont;
                    color: #999;
                    background-color: #fff;
                    -webkit-box-sizing: border-box;
                    box-sizing: border-box;
                }
            }
    }

    .login {
        width: 36rem / @baseFont;
        height: 60rem / @baseFont;
        margin: 17rem / @baseFont 0;
        text-align: center;
        img {
            width: 36rem / @baseFont;
            height: 60rem / @baseFont;
        }
    }
        }


        
    }
}

// index-wraper
.index-wraper {
    position: relative;
    width: 15rem;
    margin: 0 auto;

    .v7-banner {
        position: relative;
        height: 5.2rem;
        img.banner-bg {
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           height: 5.2rem;
        }
        .swiper-wrapper {
            position: absolute;
            width: 14.04rem;
            height: 5.2rem;
            top: 0;
            left: .48rem;
            z-index: 100;
            .swipe {
                position: relative;
                margin: 0 auto;
                max-width: 15rem;
                height: 5.2rem;
                .swipe-ul {
                    position: absolute;
                    top: 0;
                    left: 0;
                    margin: 0;
                    overflow: hidden;
                    // width: 4043.5rem / @baseFont;
                    width: 14.04rem;
                    li {
                        // float: left;
                        position: relative;
                        left: 0;
                        width: 14.04rem;
                        height: 5.2rem;
                        border-radius: .48rem;
                        overflow: hidden;
                        a {
                            display: block;
                            width: 14.04rem;
                            height: 5.2rem;
                            img {
                                position: absolute;
                                bottom: 0;
                                left: -0.48rem;
                                width: 15rem;
                                height: 7.36rem;
                            }
                        }
                    }
                }
                .trigger-wrapper {
                    position: absolute;
                    bottom: .24rem;
                    width: 100%;
                    height: .16rem;
                    text-align: center;
                    font-size: 0;
                    .trigger {
                        position: relative;
                        height: .16rem;
                        right: auto;
                        display: inline-block;
                        text-align: center;
                        li {
                            position: relative;
                            float: left;
                            overflow: hidden;
                            width: .36rem;
                            height: .16rem;
                            margin: 0 .08rem;
                            i {
                                text-align: center;
                                display: inline-block;
                                width: .18rem;
                                height: .16rem;
                                border-radius: .16rem;
                                background: rgba(0,0,0,0.3);
                                transition: width .2s;
                                
                            }
                            &.cur i {
                                background: #fff;
                                width: .36rem;
                            }
                        }
                    }
                }
            }
        }
    }
}

.enter-list {
    width: 15rem;
    height: 6.4rem;
    overflow: hidden;
    margin: 0 auto;
    ul {
        width: 30rem;
        height: 5.6rem;
        li {
            position: relative;
            float: left;
            width: 15rem;
            height: 5.68rem;
            a {
                float: left;
                width: 3rem;
                height: 2.84rem;
                text-align: center;
                img {
                    width: 1.68rem;
                    height: 1.68rem;
                    margin: .48rem auto 0;
                    background: 0;
                }
                .title {
                    line-height: .56rem;
                    width: 3rem;
                    height: .56rem;
                    overflow: hidden;
                    font-size: .44rem;
                    margin-top: .1rem;
                    color: #666;
                }
            }
        }
        &::after {
            display: block;
            content: '';
            visibility: hidden;
            clear: both;
        }
    }
}